<template>
  <div class="home-container">
    <!-- 1.顶部栏 -->
    <van-nav-bar fixed>
      <template #left>
        <div class="logo"></div>
      </template>
      <template #right>
        <van-button
          round
          icon="search"
          type="info"
          @click="$router.push({ path: '/search' })"
        >
          搜索
        </van-button>
      </template>
    </van-nav-bar>
    <!-- 2.tab栏 -->
    <!-- 点击事件要给tabs -->
    <van-tabs v-model="active" @click="tabClick">
      <!-- 下拉刷新 -->
      <van-tab v-for="item in channels" :key="item.id" :title="item.name">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <!-- 上拉刷新 -->
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <!-- 每一行内容 -->
            <van-cell
              v-for="item in list"
              :key="item.art_id.toString()"
              :title="item.title"
              @click="
                $router.push({ path: '/article', query: { id: item.art_id } })
              "
            >
              <!-- 具名插槽：指定位置 -->
              <template #label>
                <van-grid :column-num="item.cover.type">
                  <van-grid-item
                    v-for="(img, index) in item.cover.images"
                    :key="index"
                    icon="photo-o"
                    text="文字"
                  >
                    <!-- 图片懒加载：lazy-load -->
                    <van-image lazy-load :src="img" />
                  </van-grid-item>
                </van-grid>
                <div>
                  <span>{{ item.aut_name }}</span>
                  <span>({{ item.comm_count }}) 评论</span>
                  <span>{{ item.pubdate | showTime }}</span>
                </div>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getChannelsList, getArticles } from './home.js'
import moment from 'moment'
// script标签可以写代码的！
// 转为中文
moment.locale('zh-cn')

export default {
  name: 'home',
  data () {
    return {
      active: 0,
      // 上拉刷新
      list: [],
      loading: false,
      finished: false,
      // 下拉刷新
      isLoading: false,
      // 频道列表
      channels: [],
      timestamp: null
    }
  },
  // 页面一加载就显示。所以用生命周期钩子
  async created () {
    let res = await getChannelsList()
    // console.log(res)
    this.channels = res.data.data.channels
  },
  methods: {
    // 上拉加载更多(异步更新数据)
    async onLoad () {
      // 1.1如果没有时间戳，默认当前时间戳请求第一页数据
      if (!this.timestamp) {
        this.timestamp = Date.now()
      }
      // 1.2 发送请求
      // 请求文章详细信息
      // 如果有时间戳，保存下来
      let res = await getArticles({
        channel_id: this.channels[this.active].id,
        timestamp: this.timestamp
      })
      // console.log(res)
      // 1.3 保存时间戳
      this.timestamp = res.data.data.pre_timestamp
      // 1.4添加数据
      this.list.push(...res.data.data.results)

      // 修改loading为false：本次加载结束
      this.loading = false
      // 超过50条数据，就不要再触底
      if (this.list.length >= 30) {
        this.finished = true
      }
    },
    // 下拉加载更多
    onRefresh () {
      // 1.下拉刷新，先清空之前的数据
      this.list = []
      // 2.重新请求数据
      this.onLoad()
      // 上拉刷新动画显示
      this.loading = true
      // 触底没有更多数据了
      this.finished = false
      // 下拉刷新动画
      this.isLoading = false
      // 清空timestamp，加载下一页的数据
      this.timestamp = null
    },
    // 根据不同tab栏，点击加载数据
    tabClick () {
      this.list = []
      // 清空上一个tab对应的timestamp，加载另一个tab栏的数据（每一个tab栏都有自己的时间戳）
      this.timestamp = null
      this.loading = true
      this.onLoad()
    }
  },
  // 过滤时间格式（数据驱动都是要过滤的）！
  // 之前编辑页面的时间格式转化，是转化服务器的时间格式，所以不用过滤！
  filters: {
    showTime (value) {
      // 什么时候发布：距离现在
      return moment(value).fromNow()
    }
  }
}
</script>

<style lang="less">
.home-container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding-top: 46px;
  padding-bottom: 50px;
  overflow: hidden;

  // logo区域
  .logo {
    background: url('~@/assets/logo.png') no-repeat;
    background-size: cover;
    width: 100px;
    height: 30px;
  }
  // 搜索按钮
  .search-btn {
    width: 100px;
    .van-icon-search {
      color: #0f9;
    }
  }
  .van-tabs {
    height: 100%;
    box-sizing: border-box;
    padding-top: 44px;
    // tab栏标题
    .van-tabs__wrap {
      position: fixed;
      left: 0;
      right: 0;
      top: 46px;
      z-index: 1;
    }
    // tab栏内容区域
    .van-tabs__content {
      overflow-y: auto;
      height: 100%;
      .van-cell__label span {
        padding-right: 10px;
      }
    }
  }
}

// .container {
//   height: 100vh;
//   padding-top: 46px;
//   padding-bottom: 50px;
//   overflow: hidden;
//   .logo {
//     width: 100px;
//     height: 30px;
//     background: url('~@/assets/logo.png') no-repeat;
//     background-size: cover;
//   }
//   .van-nav-bar__right {
//     .van-button--info {
//       height: 30px;
//       .van-icon-search {
//         color: #fff;
//       }
//     }
//   }

//   .van-tabs {
//     height: 100%;
//     padding-top: 44px;
//     box-sizing: border-box;
//     // tab栏标题
//     .van-tabs__wrap {
//       position: fixed;
//       left: 0;
//       right: 30px;
//       top: 46px;
//       z-index: 10;
//     }
//     .van-tabs__content {
//       height: 100%;
//       overflow-y: auto;
//       .van-cell__label span {
//         padding-right: 10px;
//       }
//     }
//   }
//   .van-tab {
//     padding: 0 16px;
//   }
//   .van-tabs__line {
//     background-color: #3196fa;
//   }
// }
</style>
